<template>
	<div>
		<div class="games-sports">
			<div class="main-wrap">
				<div class="mod-banner">
					<img src="../../assets/newimg/tiyubanner.png" alt="" />
				</div>
				<div class="game-tabs">
					<div class="li" :class="tab == 0 ? 'active':''" @click="tab = 0">UG體育</div>
					<div class="li" :class="tab == 1 ? 'active':''" @click="tab = 1">CMD體育</div>
					<div class="li" :class="tab == 2 ? 'active':''" @click="tab = 2">SBO體育</div>
					<div class="li" :class="tab == 3 ? 'active':''" @click="tab = 3">三昇體育</div>
					<div class="li" :class="tab == 4 ? 'active':''" @click="tab = 4">DB體育</div>
				</div>
				<div class="game-iframe" v-if="tab == 0">
					<img class="bg" src="../../assets/newimg/tiyubg.png" alt="" />
					<div class="game-content">
						<div class="logo">
							<img src="../../assets/newimg/tiyubglogo.webp" alt="" />
						</div>
						<p class="game-desc">参加世界各地大小运动赛事，让观看球赛更加刺激有趣！</p>
						<div class="sports-play-btn" @click="getGame('UG')">{{$t('indexTitle.title223')}}</div>
					</div>
				</div>
				<div class="game-iframe" v-if="tab == 1">
					<img class="bg" src="../../assets/newimg/tiyubg.png" alt="" />
					<div class="game-content">
						<div class="logo">
							<img src="../../assets/newimg/tiyubglogo.webp" alt="" />
						</div>
						<p class="game-desc">参加世界各地大小运动赛事，让观看球赛更加刺激有趣！</p>
						<div class="sports-play-btn" @click="getGame('CM')">{{$t('indexTitle.title223')}}</div>
					</div>
				</div>
				<div class="game-iframe" v-if="tab == 2">
					<img class="bg" src="../../assets/newimg/tiyubg.png" alt="" />
					<div class="game-content">
						<div class="logo">
							<img src="../../assets/newimg/tiyubglogo.webp" alt="" />
						</div>
						<p class="game-desc">参加世界各地大小运动赛事，让观看球赛更加刺激有趣！</p>
						<div class="sports-play-btn" @click="getGame('S3')">{{$t('indexTitle.title223')}}</div>
					</div>
				</div>
				<div class="game-iframe" v-if="tab == 3">
					<img class="bg" src="../../assets/newimg/tiyubg.png" alt="" />
					<div class="game-content">
						<div class="logo">
							<img src="../../assets/newimg/tiyubglogo.webp" alt="" />
						</div>
						<p class="game-desc">参加世界各地大小运动赛事，让观看球赛更加刺激有趣！</p>
						<div class="sports-play-btn" @click="getGame('ST')">{{$t('indexTitle.title223')}}</div>
					</div>
				</div>
				<div class="game-iframe" v-if="tab == 4">
					<img class="bg" src="../../assets/newimg/tiyubg.png" alt="" />
					<div class="game-content">
						<div class="logo">
							<img src="../../assets/newimg/tiyubglogo.webp" alt="" />
						</div>
						<p class="game-desc">参加世界各地大小运动赛事，让观看球赛更加刺激有趣！</p>
						<div class="sports-play-btn" @click="getGame('O1')">{{$t('indexTitle.title223')}}</div>
					</div>
				</div>
			</div>
		</div>
		<loading v-if="isLoadingShow"></loading>
		<loadingFour :msgText="msgTextTow" v-if="isShowLoadingTeow" @closeGuanbiTow="closeGuanbi"></loadingFour>
	</div>
</template>
<script>
	import {
		playGame
	} from "../../utils/api.js"
	import loading from '../../components/loading.vue'
	import loadingFour from '../../components/loadingFour.vue';
	export default {
		data() {
			return {
				tab: 0,
				isLoadingShow: false,
				msgTextTow: "",
				isShowLoadingTeow: false
			}
		},
		components: {
			loading,
			loadingFour
		},
		created() {},
		mounted() {
			// if(localStorage.getItem('show')==1){
			// 	this.isLoadingShow = true
			// 	// window.location.href.indexOf("?show") > -1 ? this.isLoadingShow = true : ''
			// }
			window.location.href.indexOf("?show") > -1 ? this.isLoadingShow = true : ''
		},
		methods: {
			closeGuanbi(e) {
				this.isShowLoadingTeow = false;
			},
			getGame(type) {
				if (!localStorage.getItem('token')) {
					this.$emit('getShowLogin', true)
					return false;
				}
				this.isLoadingShow = true;
				// window.open('http://43.198.233.28/game/playGame?api_code=' + type + '&game_type=SB&token=' + localStorage.getItem('token') + '&game_id=', '_blank')
				let data = {
					api_code: type,
					game_type: 'SB',
					token: localStorage.getItem('token'),
					game_id: '',
				}
				let url = "";
				var wyWindow = "";
				setTimeout(() => {
					wyWindow = window.open(location.href + '?show=1', "_blank");
					// wyWindow = window.open(location.href, "_blank");
				}, 100);
				// localStorage.setItem('show',1)
				playGame(data).then((res) => {
					if (res.status.errorCode == 0) {
						console.log(res.data);
						// this.isLoadingShow = false;
						if (res.url) {
							url = res.url;
							wyWindow.location = url;
							// window.open('https://www.aies.cn/', '_blank')
							// window.open(res.url, '_blank')
						}
					} else if (res.status.errorCode == 401) {
						this.$emit('getTokenNum', false)
						console.log(401);
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
					// localStorage.removeItem('show')
					this.isLoadingShow = false;
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
		}
	}
</script>



<style scoped>
	* {
		box-sizing: border-box;
	}

	.games-sports {
		background: #2b2d42;
		min-height: calc(100vh - 394px);
		padding-bottom: 10px;
		padding-top: 40px;
	}

	.main-wrap {
		margin: 0 auto;
		position: relative;
		width: 1200px;
		padding: 0;
	}

	.mod-banner {
		height: 218px;
		overflow: hidden;
		width: 100%;
	}

	.mod-banner img {
		width: 100%;
		height: 100%;
	}

	.game-tabs {
		border: 1px solid #000;
		display: flex;
		height: 28px;
		margin: 15px auto 10px;
		padding: 1px;
		position: relative;
		width: 100%;
	}

	.li {
		background-color: #363636;
		border-right: 1px solid #000;
		color: #fff;
		cursor: pointer;
		flex: 1;
		font-size: 14px;
		line-height: 28px;
		text-align: center;
	}

	.li:hover {
		color: #f1eda9;
	}

	.li.active {
		background: #decaa7;
		color: #000;
	}

	.game-iframe {
		background: #000;
		margin-bottom: 20px;
		position: relative;
		text-align: left;
	}

	.game-iframe::before {
		background: linear-gradient(104deg, #000 10%, transparent 70%, transparent 90%, #000);
		content: "";
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
	}

	.bg {
		cursor: pointer;
		display: block;
		width: 100%;
	}

	.game-content {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		height: 100%;
		justify-content: center;
		left: 0;
		padding-left: 5%;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 2;
	}

	.logo img {
		height: 140px;
	}

	.game-desc {
		color: #fff;
		font-size: 18px;
		line-height: 1.6;
		margin: 10px 0 15px;
		text-transform: capitalize;
		width: 30%;
	}

	.sports-play-btn {
		background: #ffb703;
		color: #333;
		cursor: pointer;
		display: block;
		height: 44px;
		line-height: 44px;
		position: relative;
		text-align: center;
		width: 214px;
	}

	.sports-play-btn:hover {
		background: #d29600;
	}
</style>